/*
 * Copyright 2014-2019 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
<template>
  <div class="content-head-wrapper">
    <div class="content-head-title">
      <span class="content-head-icon" v-if="icon" @click="skip">
        <i class="el-icon-arrow-left"></i>
      </span>
      <span :class="{ 'font-color-9da2ab': headSubTitle }">{{ title }}</span>
      <span v-show="headSubTitle" class="font-color-9da2ab">/</span>
      <span>{{ headSubTitle }}</span>
      <el-tooltip
        effect="dark"
        :content="headTooltip"
        placement="bottom-start"
        v-if="headTooltip"
      >
        <i class="el-icon-info contract-icon font-15"></i>
      </el-tooltip>
      <a
        v-if="headHref"
        target="_blank"
        :href="headHref.href"
        class="font-color-fff font-12"
        >{{ headHref.content }}</a
      >
    </div>
    <div class="content-head-network" style="padding-right: 40px">
      <el-popover
        placement="bottom"
        width="120"
        min-width="50px"
        v-model="popoverShow"
        trigger="click"
      >
        <ul class="group-item">
          <li
            class="group-item-list"
            v-for="item in chainList"
            :key="item.chainId"
            @click="changeGroup(item)"
          >
            {{ item.chainName }}
          </li>
        </ul>
        <span
          slot="reference"
          class="contant-head-name"
          style="color: #fff"
          @click="checkGroup"
          >区块链: {{ chainName || "-" }}</span
        >
      </el-popover>

      <!-- <span @click="checkNetwork" class="select-network">切换区块链</span> -->
    </div>
  </div>
</template>

<script>
import dialog from "./groupdialog";
import router from "@/router";
import { getChains } from "@/api/api";
// import { delCookie } from '@/util/util'
import Bus from "@/bus";
export default {
  name: "conetnt-head",
  props: {
    headTitle: {
      type: String,
    },
    icon: {
      type: Boolean,
    },
    route: {
      type: String,
    },
    headSubTitle: {
      type: String,
    },
    headTooltip: {
      type: String,
    },
    headHref: {
      type: Object,
    },
  },
  components: {
    "v-dialog": dialog,
  },
  watch: {
    headTitle: function (val) {
      this.title = val;
    },
  },
  data: function () {
    return {
      title: this.headTitle,
      chainName: "-",
      accountName: "-",
      dialogShow: false,
      path: "",
      headIcon: this.icon || false,
      way: this.route || "",
      changePasswordDialogVisible: false,
      groupList: [],
      chainList: [],
      popoverShow: false,
    };
  },
  beforeDestroy: function () {
    Bus.$off("delete");
  },
  mounted: function () {
    if (localStorage.getItem("chainName")) {
      this.chainName = localStorage.getItem("chainName");
    }
    this.getChainList();
    Bus.$on("delete", (data) => {
      this.getChainList();
    });
  },
  methods: {
    getChainList: function () {
      getChains()
        .then((res) => {
          if (res.data.code === 0) {
            this.chainList = res.data.data;
            if (!localStorage.getItem("chainId")) {
              if (res.data.data.length) {
                localStorage.setItem("chainId", res.data.data[0].chainId);
                localStorage.setItem("chainName", res.data.data[0].chainName);
                this.chainName = localStorage.getItem("chainName");
              } else {
                localStorage.setItem("chainId", "");
                localStorage.setItem("chainName", "");
                this.chainName = "";
              }
            } else {
              let num = 0;
              for (let i = 0; i < this.chainList.length; i++) {
                if (
                  this.chainList[i].chainId == localStorage.getItem("chainId")
                ) {
                  num++;
                }
              }
              if (num == 0) {
                if (this.chainList && this.chainList.length) {
                  localStorage.setItem("chainId", this.chainList[0].chainId);
                  localStorage.setItem(
                    "chainName",
                    this.chainList[0].chainName
                  );
                  this.chainName = localStorage.getItem("chainName");
                } else {
                  localStorage.setItem("chainId", "");
                  localStorage.setItem("chainName", "");
                  this.chainName = "";
                }
              }
            }
          }
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "系统错误",
          });
        });
    },
    checkGroup: function () {
      if (this.dialogShow) {
        this.dialogShow = false;
      } else {
        this.dialogShow = true;
      }

      this.path = this.$route.path;
    },
    checkNetwork: function () {},
    changeGroup: function (val) {
      debugger;
      this.chainName = val.chainName;
      localStorage.setItem("chainName", val.chainName);
      localStorage.setItem("chainId", val.chainId);
      this.$emit("changGroup", val.chainId);
      this.dialogShow = true;
      this.popoverShow = false;
    },
    changeNetwork: function () {
      this.chainName = localStorage.getItem("chainName");
      this.dialogShow = false;
    },
    skip: function () {
      if (this.route) {
        this.$router.push(this.way);
      } else {
        this.$router.go(-1);
      }
    },
    changePassword: function () {
      this.changePasswordDialogVisible = true;
    },
    success: function (val) {
      this.changePasswordDialogVisible = false;
    },
  },
};
</script>
<style scoped>
.content-head-wrapper {
  width: calc(100%);
  background-color: #181f2e;
  text-align: left;
  line-height: 54px;
  position: relative;
}
.content-head-wrapper::after {
  display: block;
  content: "";
  clear: both;
}
.content-head-icon {
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
.content-head-title {
  margin-left: 40px;
  display: inline-block;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}
.content-head-network {
  float: right;
  padding-right: 10px;
  position: relative;
}
.browse-user {
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
  color: #cfd7db;
}
.sign-out-wrapper {
  line-height: 32px;
  text-align: center;
}
.sign-out {
  cursor: pointer;
  color: #ed5454;
}
.change-password {
  color: #0db1c1;
  cursor: pointer;
}
.network-name {
  font-size: 12px;
  color: #9da2ab;
  padding: 3px 0px;
  /* border-right: 2px solid #e7ebf0; */
  margin-right: 16px;
}
.select-network {
  color: #2d5f9e;
  cursor: default;
}
.content-head-network a:nth-child(1) {
  text-decoration: none;
  outline: none;
  color: #cfd7db;
  padding-right: 15px;
  border-right: 1px solid #657d95;
  margin-right: 15px;
}
.contant-head-name {
  position: relative;
  cursor: pointer;
}
.contant-head-name ul {
  position: absolute;
  width: 150%;
  left: -10px;
  top: 35px;
  background-color: #fff;
  color: #666;
  text-align: center;
  z-index: 9999999;
  box-shadow: 1px 4px 4px;
}
.contant-head-name ul li {
  width: 100%;
  padding: 0 10px;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
}
.group-item {
  line-height: 32px;
  text-align: center;
}
.group-item-list {
  cursor: pointer;
}
.group-item-list:hover {
  color: #0db1c1;
}
</style>
